<template>
  <page-header-wrapper>
    <template #extra>
      <a-button type="primary" style="margin-left: 10px" @click="onsubmit"
                v-if="updateActionDate.state">
        保存
      </a-button>
      <a-button type="primary" style="margin-left: 10px"
                v-if="updateActionDate.state"
                @click="toCancelEdit"
      >
        返回
      </a-button>
    </template>
    <div class="table-page-search-wrapper">
      <a-card :loading="loading">
        <div slot="title">
          页面详情
          <span style="margin-left: 10px;">
            <a-badge  v-if="!(loading||updateActionDate.data==null)" :color="updateActionDate.data.state==1?'green':'red'"
                     :text="updateActionDate.data.state==1?'可访问':'已关闭'"/>
              <a-button  type="link" size="small">切换</a-button>
          </span>
        </div>
        <div>
          <a-form :layout="'inline'">
            <a-row :gutter="48">
              <a-col :xl="6" :lg="12" :xs="24">
                <a-form-item label=" 页面名称">
                  <a-input :read-only="!updateActionDate.state" v-model:value="updateActionDate.data.name"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <div data-v-53922493="" class="ant-row ant-form-item" style="height: auto;margin-bottom: 5px;">
                  <div class="ant-col ant-form-item-label"><label class="">页面描述</label>
                  </div>
                  <div class="ant-col ant-form-item-control-wrapper">
                    <div class="ant-form-item-control" style="height: unset">
                      <a-textarea :read-only="!updateActionDate.state" v-model="updateActionDate.data.details" :rows="4"/>
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-form>
          <a-form>
            <a-form-item label="页面详情">
              <tinymce-editor v-model:value="updateActionDate.data.info"
                              :disable="!updateActionDate.state">
              </tinymce-editor>
            </a-form-item>
          </a-form>
        </div>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import router from '@/router'
import {addDiy} from "@/api/modules/DiyRequest";
export default {
  name: "SelfDefinePage",
  data() {
    return {
      updateActionDate: {
        state: true,
        data: null
      },
      data: null,
      loading: false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true;
      this.data = {
        name: '',
        info: '',
        state:1,
        details: ""
      }
      this.updateActionDate.data = JSON.parse(JSON.stringify(this.data))
      this.loading = false;
    },
    async toCancelEdit() {
      router.back();
    },
    onChangeDetails(value){
        this.updateActionDate.data.info = value;
    },
    async onsubmit(){
      if(this.loading) return;
      this.loading=true;
      let _this=this;
      await addDiy(this.updateActionDate.data).then((res)=>{
          _this.$notification.success({
            message:'创建成功'
          })
        router.push({
          path: '/config/self-define-page/' + res.data
        })
      })
      this.loading=false;
    },
  }
}
</script>

<style scoped>

</style>